<template>
  <div>
    <DeptTab :curr-active="DEPT_TAB_STATUS.DELETED" />
    <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="deleted-dept-container">
      <FilterInput
        v-if="!showMobilePage"
        ref="FilterToolRef"
        v-model="paramsObj"
        :filter-list="filterList"
        :show-advanced-filter="false"
        style="margin-bottom: 12px"
        show-search-btn
        @handelClick="queryClick"
        @queryEmpty="queryEmpty"/>
      <div class="table-list">
        <div v-loading="loading" style="min-height: 100px;">
          <u-table
            v-if="list.items.length"
            :data="list.items"
            :height="setTableHeight"
            :row-height="rowHeight()"
            :border="true"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            hightlight-current-row>
            <u-table-column align="left" label="部门名称">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.deptName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="部门ID">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.deptId" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="上级部门">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.parentDept" :tool-tip="scope.row.fullDeptPath" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="删除日期">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.deletedDate" />
              </template>
            </u-table-column>
          </u-table>
          <EmptyPlaceholder v-else slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
        </div>
      </div>
      <el-row v-if="showMobilePage" type="flex" justify="left">
        <el-pagination
          v-show="list.total > 0"
          :current-page="page"
          :page-size="perPage"
          :total="list.total"
          :small="true"
          :page-sizes="[20, 50, 100, 250, 500]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <fixed-pagination>
        <template v-if="showMobilePage">
          <FilterInput
            ref="FilterToolRef"
            v-model="paramsObj"
            :filter-list="filterList"
            :show-advanced-filter="false"
            show-mobile-icon
            show-search-btn
            @handelClick="queryClick"
            @queryEmpty="queryEmpty"/>
        </template>
        <template v-else>
          <div style="flex: 1;" />
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="page"
            :page-size="perPage"
            :total="list.total"
            :page-sizes="[20, 50, 100, 250, 500]"
            layout="total, prev, pager, next, sizes, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </template>
      </fixed-pagination>
    </div>
  </div>
</template>

<script>
import DeptTab from './components/deptTab';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import TableAdaptive from '@/mixins/tableAdaptive';
import { deletedDeptList } from '@/api/department';
import { DEPT_TAB_STATUS } from '@/utils/const/setting';
import mobileTable from '@/mixins/mobileTable';

export default {
  name: 'DeletedDept',
  components: {
    DeptTab,
    EmptyPlaceholder
  },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      DEPT_TAB_STATUS,
      paramsObj: {},
      loading: false,
      page: 1,
      perPage: 20,
      list: {
        items: [],
        page: 1,
        perPage: 20,
        total: 0
      }
    };
  },
  computed: {
    filterList() {
      return [
        { keyword: 'deptName', name: '部门名称', type: 'input' },
        { keyword: 'deptId', name: '部门ID', type: 'input' }
      ];
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 200 : 0;
    }
  },
  created() {
    this.fetchData(true);
  },
  methods: {
    fetchData(reset = false) {
      if (reset) this.page = 1;
      const params = _.cloneDeep(this.paramsObj);
      params.page = this.page;
      params.perPage = this.perPage;
      this.loading = true;
      deletedDeptList(params).then(res => {
        if (res.code === 200) {
          this.list = res.data;
        }
        this.loading = false;
      }).catch(_ => {
        this.loading = false;
      });
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    queryClick() {
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    }
  }
};
</script>

<style scoped lang="scss">
.deleted-dept-container {
  margin: 16px;
  background-color: #fff;
  padding: 20px;
  min-height: calc(100vh - 80px);
}
</style>
